<template>
	<Layout>
    <view class="box">
      <image src="../../static/icon/logo.png" mode="aspectFill" class="logo"></image>
      <view class="btn" :class="{on: checked}" @click="goThreeLogin">一键登录</view>
      <view class="btn btn1" @click="backHome">返回首页</view>
      <view class="flex-lect" :class="{on: checked}">
        <view class="flex-lect" @click="checked = !checked">
          <view class="radio flex-ct mr15"><u-icon v-if="checked" name="checkmark" color="#fff" size="20"></u-icon></view>
          <text class="color-999">我已阅读并同意</text>
        </view>
        <text class="t" @click="skip('agreement')">用户协议</text>
        和
        <text class="t" @click="skip('policy')">隐私政策</text>
      </view>
    </view>
  </Layout>
</template>

<script>
	import { loginfunc } from '@/common/fa.mixin.js';
	export default {
		mixins: [loginfunc],
		onLoad() {
			// #ifdef MP-WEIXIN || APP-PLUS
			this.isThreeLogin = true;
			// #endif

			// #ifdef H5
			if (this.$util.isWeiXinBrowser()) {
				this.isThreeLogin = true;
			}
			// #endif

			// 如果仅有账号登录一种方式则直接跳转至登录页
			if (this.checkLogintype('account') && this.vuex_config.logintypearr.length === 1) {
				this.$u.route({ url: '/pages/login/login', type: 'redirectTo' });
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// if(this.checkLogintype('mobile')){
			// 	this.$refs.uForm.setRules(this.rules);
			// }
		},
		data() {
			return {
        checked:false,
        
				labelPosition: 'top',
				border: false,
				errorType: ['message'],
				form: {
					mobile: '',
					captcha: ''
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入手机号码',
							// 可以单个或者同时写两个触发验证方式
							trigger: ['change', 'blur']
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur']
						}
					],
					captcha: [{
						required: true,
						message: '请输入验证码',
						trigger: 'change'
					}]
				},
				isThreeLogin: false,
				codeTips: ''
			};
		},
		methods: {
      backHome(){
        console.log('返回')
        uni.reLaunch({
          url:'/pages/index/index'
        })
      },
      skip(t) {
        uni.navigateTo({
          url: `/home/mine/protocol?type=${t}`
        })
      },
			codeChange(text) {
				this.codeTips = text;
			},
			// 获取验证码
			getCode: async function() {
				if (!this.$u.test.mobile(this.form.mobile)) {
					this.$u.toast('手机号码格式不正确！');
					return;
				}
				if (this.$refs.uCode.canGetCode) {
					let res = await this.$api.getSmsSend({
						mobile: this.form.mobile,
						event: 'mobilelogin'
					});
					setTimeout(() => {
						this.$u.toast(res.msg);
					}, 50);
					if (res.code == 1) {
						this.$refs.uCode.start();
					}
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			goThreeLogin: async function() {
				// #ifdef MP-WEIXIN
        if(this.checked){
          this.goMpLogin();
        }else{
          return uni.showToast({title:'请勾选阅读并同意<用户协议>和<隐私政策>', icon:'none'})
        }
				
				// #endif

				// #ifdef H5
				this.goAuth();
				// #endif

				// #ifdef APP-PLUS
				this.goAppLogin();
				// #endif
			},
			goLogin: function() {
				this.$refs.uForm.validate(async valid => {
					if (valid) {
						if (this.vuex_wx_uid) {
							this.form.wx_user_id = this.vuex_wx_uid;
						}
						let res = await this.$api.mobilelogin(this.form);
						if (!res.code) {
							this.$u.toast(res.msg);
							return;
						}
						this.$u.vuex('vuex_token', res.data.token);
						this.success();
					} else {
						this.$u.toast('验证失败');
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #ffffff;
	}
  .radio{width: 32rpx; height: 32rpx; border-radius: 50%; border: 2px solid #AAAAAA;}
  .on{
    .radio{background-color: #05B196; border-color: #05B196;}
  }
  
  .logo{width: 150rpx; height:150rpx; display: block; margin: 200rpx auto 25rpx;}
  .btn{width: 100%; margin: 0 auto 50rpx; display: flex; align-items: center; justify-content: center; height: 88rpx; border-radius: 40rpx; margin-top: 58rpx; background-color: #05B196; opacity: 0.6; color: #fff; font-size: 30rpx;}
  .btn.on{opacity: 1;}
  .btn1{background-color: #fff; color: #666; border:1px solid #ddd;}
	.login {
		padding: 80rpx 100rpx 0 100rpx;
	}
  .t{color:#05B196; margin: 0 10rpx;}

	.other {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 40rpx;
	}
</style>